import React from 'react';
import styles from './preview.less';
import {handlerTextAreaValue} from '@/utils/utils';

class Preview extends React.Component {

    constructor() {
        super();
        this.state = {};
    }
    componentWillMount() {
      window.Isoption = false;
    }
    componentDidMount() {
      window.Isoption = true;
    }

    render() {
        const {title, oemInfo, name, ConditionType,ConditionNum, WaiverAmountNum, dateString, textName} = this.props;
        const imageUrl = "xkdnewyun/systemfile/store/coupon_bg.png";
        return (
            <div className={styles.content}>
               <div className={styles.title}>
                    <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/phonebar.png" width={375} height={65}/>
                    <div>{title}</div>
               </div>
               <div className={styles.mid} style={{
                   backgroundImage: `url(${oemInfo&&oemInfo.cdnUrl?oemInfo['cdnUrl'] + '/' + imageUrl +'?x-oss-process=style/240':''})`,
                   backgroundRepeat: 'no-repeat',
                   backgroundSize: 'cover'
                }}>
                    <div className={styles.card}>
                        <div>
                            {WaiverAmountNum?<div>￥</div>:<div style={{width: 14}}/>}
                            {WaiverAmountNum?<div style={{width: 96}}>{WaiverAmountNum}</div>:<div style={{width: 96}}/>}
                        </div>
                        <div>
                            {name?<div>{name}</div>:<div style={{height: 21}}/>}
                            <div>{ConditionType==='a'?'无使用门槛':`满${ConditionNum}元可用`}</div>
                        </div>
                    </div>
                    {dateString[0] &&<div className={styles.time}>有效时限: {dateString[0]} ~ {dateString[1]}</div>}
               </div>
               <div className={styles.foot}>
                   <div>使用说明</div>
                   {textName?<div dangerouslySetInnerHTML={{__html: handlerTextAreaValue(textName)}} /> :(
                         <div>
                             全部商品可用<br/>
                             {ConditionType==='a'?'无使用门槛':`订单满${ConditionNum}元`}<br/>
                             {WaiverAmountNum&&<span>减免{WaiverAmountNum}元</span>}<br/>
                             {dateString[0]&&<span>有效时限: {dateString[0]} ~ {dateString[1]}</span>}<br/>
                         </div>
                     )}
               </div>
            </div>
        )
    }
}

export default Preview;
